<template>
  <div class="member-list">
    <a-form class="search-form">
      <a-row :gutter="24">
        <a-col :span="3">
          <a-button type="primary" style="margin-bottom: 12px;">
            <a-icon type="plus-circle"/>新增服务商
          </a-button>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :lg="8" :xl="5" :xxl="4">
          <a-form-item label="审核状态">
            <a-select v-model="auditStatus">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="1">已审核</a-select-option>
              <a-select-option value="2">未审核</a-select-option>
              <!-- 0 全部 1 未审核 2 已审核 -->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="5" :xxl="3">
          <a-form-item label="类型">
            <a-select v-model="providerType">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="1">个人</a-select-option>
              <a-select-option value="2">企业</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="5" :xxl="4">
          <a-form-item label="分润状态">
            <a-select v-model="commissionStatus">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="2">开启</a-select-option>
              <a-select-option value="1">关闭</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="5" :xxl="4">
          <a-form-item label="账号状态">
            <a-select v-model="enableStatus">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="2">开启</a-select-option>
              <a-select-option value="1">关闭</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="16" :xl="10" :xxl="7">
          <a-form-item label="所属区域">
            <area-select
              :createPlace="area"
              @handlePlace="selectArea"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="9" :xxl="7">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 30%" v-model="timeType">
                <a-select-option value="1">创建时间</a-select-option>
                <a-select-option value="2">签约时间</a-select-option>
              </a-select>
              <date style="width: 70%" :value="time" @change="dateChange"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="7">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" class="l-select" v-model="searchType">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">服务商ID</a-select-option>
                <a-select-option value="2">服务商账号</a-select-option>
                <a-select-option value="3">服务商名称</a-select-option>
                <a-select-option value="4">服务商手机号</a-select-option>
                <a-select-option value="5">推荐人姓名</a-select-option>
                <a-select-option value="6">推荐人手机号</a-select-option>
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="keywords"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="8">
          <div class="top-btns">
            <a-button type="primary" html-type="submit" @click="searchListData">查询</a-button>
            <a-button html-type="reset" @click="resetList">重置</a-button>
            <a-button type="primary" @click="exportList"><a-icon type="download" />导出</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="providerListData"
        rowKey="id"
        :pagination="pagination"
        :loading="loading"
        :scroll="scrollX"
      >
        <span slot="is_commission" slot-scope="value, item">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            :defaultChecked="parsevalue(value)"
            @change="isCommissionKG(item)"
            disabled
          />
        </span>
        <span slot="is_enable" slot-scope="value, item">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            :defaultChecked="parsevalue(value)"
            @change="isEnableKG(item)"
            disabled
          />
        </span>
        <span slot="action" slot-scope="text, item" class="action-wrap">
          <!-- <a @click="viewDetail(item)">查看详情</a> -->
          <a>钱包</a>
          <a>优惠券</a>
        </span>
      </a-table>
      <pagination
        :total="total"
        @loadDataList="pageInit"
        ref="pageBand"
      />
    </div>
    <div class="modal-wrap">
      <!-- 导出弹窗 -->
      <a-modal
        title="导出确认"
        v-model="visible"
        @ok="handleExportOk"
        okText="确认导出"
        :confirmLoading="loading"
        class="export-modal"
      >
        <p>请选择导出时间(非必选): </p>
        <a-input-group class="query-item" compact>
          <a-select style="width: 60%;" v-model="exTimeType">
            <a-select-option value="1">创建时间</a-select-option>
            <a-select-option value="2">签约时间</a-select-option>
          </a-select>
          <date style="width: 80%;margin:15px auto;" :status="1" :value="exportTime" @change="dateExportChange"/>
        </a-input-group>
      </a-modal>
    </div>
  </div>
</template>
<script>
import { providerList, exportList } from '../../store/providerApi.js'
export default {
  name: 'ProviderList',
  data() {
    return {
      exTimeType: '1',
      visible: false,
      providerType: '0', // 服务商类型
      commissionStatus: '0', // 分润状态
      enableStatus: '0', // 账号状态
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      total: 0,
      start_time: 0,
      end_time: 0,
      keywords: '',
      pagination: false,
      loading: false,
      scrollX: {},
      searchType: '0',
      auditStatus: '0',
      time: [],
      area: [],
      exportTime: [], // 导出时间
      exportStartTime: 0,
      exportEndTime: 0,
      timeType: '1', // 时间查询
      columns: [
        {
          dataIndex: 'index',
          title: '序号',
          fixed: 'left',
          width: 60
        },
        {
          title: '服务商id',
          dataIndex: 'id'
        },
        {
          title: '服务商账号',
          dataIndex: 'partner_no'
        },
        {
          title: '服务商姓名',
          dataIndex: 'partner_name'
        },
        {
          title: '服务商手机号',
          dataIndex: 'phone'
        },
        {
          title: '推荐人姓名',
          dataIndex: 'pid_name'
        },
        {
          title: '推荐人手机号',
          dataIndex: 'pid_phone'
        },
        {
          title: '类型',
          dataIndex: 'type',
          customRender(type) {
            if (type == 1) {
              return '个人'
            } else if (type == 2) {
              return '企业'
            }
          }
        },
        {
          title: '加盟费',
          dataIndex: 'participation'
        },
        {
          title: '余额',
          dataIndex: 'balance'
        },
        {
          title: '省份',
          dataIndex: 'province_name'
        },
        {
          title: '城市',
          dataIndex: 'city_name'
        },
        {
          title: '区/县',
          dataIndex: 'district_name'
        },
        {
          title: '创建时间',
          dataIndex: 'created_at'
        },
        {
          title: '签约时间',
          dataIndex: 'sign_at'
        },
        {
          title: '签约年限',
          dataIndex: 'sign_year_limit'
        },
        {
          title: '审核状态',
          dataIndex: 'is_verify',
          customRender(is_verify) {
            /* eslint-disable */
            if (is_verify == false) {
              return '未审核'
            } else if (is_verify == true) {
              return '已审核'
            }
            /* eslint-disable */
          }
        },
        {
          title: '分润状态',
          dataIndex: 'is_commission',
          scopedSlots: { customRender: 'is_commission' }
        },
        {
          title: '账号状态',
          dataIndex: 'is_enable',
          scopedSlots: { customRender: 'is_enable' }
        },
        {
          title: '操作',
          fixed: 'right',
          width: 200,
          scopedSlots: { customRender: 'action' }
        }
      ],
      providerListData: [],
    }
  },
  mounted() {},
  methods: {
    selectArea ({area, provinceId, cityId, districtId}) {
      this.area = area
      this.provinceId = provinceId
      this.cityId = cityId
      this.districtId = districtId
    },
    viewDetail(item) {
      this.$router.push({
        path: '/menu/provider/list/details/index',
        query: { id: item.uuid }
      })
    },
    parsevalue(value) {
      return JSON.parse(value)
    },
    // 列表和筛选接口
    pageInit(info) {
      this.loading = true
      var data = {
        partner_type: this.providerType,
        commission_type: this.commissionStatus,
        enable_type: this.enableStatus,
        search_type: this.searchType,
        verify_type: this.auditStatus,
        time_type: this.timeType,
        start_time: this.start_time,
        end_time: this.end_time,
        page: info.page,
        num: info.pageSize,
        name: this.keywords,
      }
      if (this.provinceId != '') {
        data.province_id = this.provinceId
      }
      if (this.cityId != '' || this.cityId == undefined) {
        data.city_id = this.cityId
      }
      if (this.districtId != '' || this.districtId == undefined) {
        data.district_id = this.districtId
      }
      providerList(data).then(res => {
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.providerListData = array
        this.total = res.data.total_num
        if (res.data.list.length > 0) {
          this.scrollX = { x: 2500 }
        } else {
          this.scrollX = {}
        }
        this.loading = false
      })
    },
    // 按条件查询
    searchListData() {
      this.$refs.pageBand.getData()
    },
    // 重置
    resetList() {
      this.enableStatus = '0'
      this.commissionStatus = '0'
      this.providerType = '0'
      this.timeType = '1'
      this.searchType = '0'
      this.area = []
      this.provinceId = ''
      this.cityId = ''
      this.districtId = ''
      this.start_time = 0
      this.end_time = 0
      this.auditStatus = '0'
      this.keywords = ''
      this.$refs.pageBand.getData()
    },
    // 筛选时间
    dateChange({ date, start_time, end_time }) {
      this.time = date
      this.start_time = start_time
      this.end_time = end_time
      console.log(date, start_time, end_time)
    },
    // 开关操作
    isCommissionKG(checked) {
      console.log(checked, 'is_commissin')
    },
    isEnableKG(checked) {
      console.log(checked, 'is_enable')
    },
    // 导出按钮弹出弹窗
    exportList () {
      // debugger
      this.exportStartTime = 0
      this.exportEndTime = 0
      this.exportTime = []
      this.visible = true
    },
    // 确认导出
    handleExportOk () {
      this.loading = true
      exportList({
        time_type: this.exTimeType,
        start_time: this.exportStartTime || 0,
        end_time: this.exportEndTime || 0
      }).then(res => {
        this.loading = false
        if (!res.error) {
          window.location.href = res.data.url
        }
        this.visible = false
      }).catch(e => {
        this.loading = false
      })
    },
    // 导出筛选时间
    dateExportChange({ date, start_time, end_time }) {
      this.exportTime = date
      this.exportStartTime = start_time
      this.exportEndTime = end_time
      // console.log(date, start_time, end_time)
    }
  }
}
</script>
<style>
</style>
